<template>
  <!-- 巡检监控 -->
  <div class="inspection-monitor-box">
    <table />
    <div class="inspection-monitor-header-box">
      <div class="subtitle-box startbox">
        <!-- <div class="name">巡检监控</div> -->
      </div>
      <div class="return-btn">
        <div class="return">
          <!-- <span @click="goBack"></span> -->
        </div>
      </div>
    </div>
    <div class="cont-box borderStyle">
      <div class="cont-box-left">
        <div class="cont-box-left-title">
          <div>{{querydata.BDZMC }}</div>
          <div>
            开始时间：
            <span>{{querydata.XSKSSJ}}</span>
          </div>
          <div>
            巡检持续时间：
            <!-- <span>{{querydata.XSKSSJ}}</span> -->
            <!-- <span>{{continue}}</span> -->
          </div>
        </div>
        <div class="video2">
          <div class="video2-box">
            <myvideo ref="myvideo" />
          </div>
        </div>
        <div class="bottom-btn">
          <el-button class="table-query" type="primary" @click="changeTask('3')">任务暂停</el-button>
          <el-button class="table-query" type="primary" @click="changeTask('4')">任务继续</el-button>
          <el-button class="table-query" type="primary" @click="changeTask('1')">任务终止</el-button>
        </div>
      </div>
      <div class="cont-box-right">
        <!-- 暂时隐藏告警推送按钮 -->
        <!-- <div class="alarm" @click="Jump">告警推送</div> -->
        <div class="cont-box-right-title">
          <div class="Progress-box">
            <div class="Progress-text">巡检进度</div>
            <div class="Progress">
              <el-progress
                :text-inside="true"
                :stroke-width="26"
                :color="customColor"
                :percentage="percentage"
              ></el-progress>
            </div>
          </div>
          <div class="Message-box">
            <div>
              <span>总测点1:</span>
              <span>{{cddata.ZCDS}}</span>
            </div>
            <div>
              <span>已巡点数:</span>
              <span>{{cddata.YXSCDS}}</span>
            </div>
            <div>
              <span>告警:</span>
              <span class="colorR">{{cddata.YCCDS}}</span>
            </div>
            <div>
              <span>预警:</span>
              <span>{{cddata.YJCDS}}</span>
            </div>
          </div>
        </div>
        <div class="right-table">
          <div class="table-box bigTableStyle">
            <el-table
              :row-class-name="tableRowClassName"
              :data="tableData"
              style="width: 100%"
              height="100%"
              border
            >
              <el-table-column prop="CDSBMC" label="巡检内容" :show-overflow-tooltip="true" width="310"></el-table-column>
              <el-table-column prop="JCSJ" label="巡检时间" :show-overflow-tooltip="true" width="180"></el-table-column>
              <el-table-column prop="JGZSFS" label="结果" width="70" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="XSJG" label="结论" width="70" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <div>{{scope.row.XSJG | jr(scope.row.JGZSFS)}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="SSJCZ" label="实时数据" :show-overflow-tooltip="true" width="85"></el-table-column>
              <el-table-column prop="WCZ" label="对比数据" :show-overflow-tooltip="true" width="85"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="推送数据"
      top="10vh"
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="handleClose"
    >
      <report v-if="dialogVisible" :Manipulation="paramsData" />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import myvideo from "./video.vue";
import report from "./report.vue";
import time from "@/utils/time";
@Component({
  components: { report, myvideo },
  filters: {
    jr: (value) => {
      var val = "";
      switch (value) {
        case 0:
          val = "告警";
          break;
        case 1:
          val = "正常";
          break;
        case 2:
          val = "漏点";
          break;
        case 3:
          val = "无法识别";
          break;
        case 4:
          val = "人工识别";
          break;
        case 5:
          val = "预警";
          break;
        default:
          val = "";
          break;
      }
      return val;
    },
  },
})
export default class extends Vue {
  $refs!: {
    myvideo: myvideo;
  };
  //进度条颜色 原来的黄色'#CFCD0A'
  public customColor: string = "#287e66";

  //返回按钮
  goBack() {
    // window.history.back();
    var oldoldrouter = this.$route.query.oldoldrouter;
    this.$router.push({
      path: "track",
      query: {
        xslx: (this as any).$route.query.xslx,
        id: (this as any).$route.query.id,
        oldrouter: "inspectionMonitor",
        oldoldrouter: oldoldrouter,
      },
    });
  }
  // @Watch("tableData")
  // // 设置播放数据
  // setPreview() {
  //   let query = this.$route.query || {};
  //   let stationId: any = query.bdzid;
  //   let VIDEOID = "";
  //   this.tableData.forEach((v) => {
  //     if (v.VIDEOCODE) {
  //       VIDEOID = v.VIDEOCODE;
  //     }
  //   });
  //   let videoData = {
  //     stationId: stationId,
  //     list: [
  //       {
  //         stationId: stationId,
  //         indexCode: VIDEOID,
  //       },
  //     ],
  //   };
  //   let myvideo = this.$refs.myvideo;
  //   if (myvideo) {
  //     myvideo.shipinData = videoData;
  //   }
  // }

  @Watch("tableData")
  // 设置播放数据
  setPreview() {
    let query = this.$route.query || {};
    let stationId: any = query.bdzid;
    if (stationId == "1500000001") {
      this.setTianpingPreview();
    } else {
      this.setOtherPreview(stationId);
    }
  }

  // 设置其他站的视频播放数据
  setOtherPreview(stationId) {
    let VIDEOID = "";
    this.tableData.forEach((v) => {
      if (v.VIDEOCODE) {
        VIDEOID = v.VIDEOCODE;
      }
    });
    let videoData = {
      stationId: stationId,
      list: [
        {
          stationId: stationId,
          indexCode: VIDEOID,
        },
      ],
    };
    this.setShipin(videoData);
  }
  oldlist = [];
  // 判断数据是否和旧数据一样
  isSame(list, oldlist) {
    let allList = [...list, ...oldlist];
    allList = [...new Set(allList)];
    let newLength = list.length;
    let oldLength = oldlist.length;
    let allLength = allList.length;
    if (newLength === allLength && oldLength === allLength) {
      return true;
    } else {
      return false;
    }
  }
  setShipin(videoData) {
    let list = videoData.list.map((v) => {
      return v.indexCode;
    });
    let isSame = this.isSame(list, this.oldlist);
    if (isSame) {
      return false;
    }
    this.oldlist = list;
    let myvideo = this.$refs.myvideo;
    if (myvideo && videoData.stationId) {
      myvideo.shipinData = videoData;
    }
  }
  //设置天平站的视频播放数据
  setTianpingPreview() {
    let params = {
      jhId: this.paramsData.queryId || "",
      rate: "5",
    };
    (this as any).$services
      .getJqrCodeInterval({ data: params })
      .then((result: any) => {
        let data = result.data || [];
        let first = data[0] || {};
        let videoData = {
          stationId: first.STATIONID,
          list: data.map((v) => {
            return {
              stationId: v.STATIONID,
              indexCode: v.VIDEOCODE,
            };
          }),
        };
        this.setShipin(videoData);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  public tableData: Array<any> = [];
  //表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //弹窗相关
  dialogVisible = false;
  handleClose() {
    this.dialogVisible = false;
  }
  Jump() {
    this.dialogVisible = true;
  }

  paramsData: any = this.$route.query;

  // 巡检计划跟踪页面下方的按钮控制
  changeTask(type: string) {
    // 3:任务暂停，4:任务继续，1:任务终止
    (this as any).$services
      .operateTask({
        method: "get",
        data: {
          jhId: this.paramsData.queryId,
          taskSate: type,
        },
      })
      .then((result: any) => {
        if (result.code == 200) {
          this.$message({
            type: "success",
            message: result.data,
          });
        } else {
          this.$message({
            type: "warning",
            message: "操作失败！",
          });
        }
        // console.log("按钮控制反馈:", result);
      })
      .catch((err: any) => {
        console.log(err);
        this.$message({
          type: "warning",
          message: err.msg,
        });
      });
  }

  querydata: any = {};
  continue: any = "00:00:00";
  cddata: any = {};
  private init() {
    if (this.paramsData.xsfs == "0" || this.paramsData.xsfs == "1") {
      this.paramsData.xsfs = "jqr";
    } else if (this.paramsData.xsfs == "2") {
      this.paramsData.xsfs = "spjk";
    } else if (this.paramsData.xsfs == "3") {
      this.paramsData.xsfs = "hjjk";
    } else if (this.paramsData.xsfs == "4") {
      this.paramsData.xsfs = "zxjc";
    } else if (this.paramsData.xsfs == "5") {
      this.paramsData.xsfs = "gqsp";
    }
    // console.log(this.paramsData);
    if (!this.paramsData) {
      return;
    }

    // 区域1和2-上面的汇总和变电站信息
    (this as any).$services
      .getQueryData({
        method: "get",
        data: {
          jhId: this.paramsData.queryId || "",
        },
      })
      .then((result: any) => {
        if (result.data) {
          this.cddata = result.data.data[0];
          result.data.name[0].XSKSSJ = time(result.data.name[0].XSKSSJ);
          this.querydata = result.data.name[0];
        }
      })
      .catch((err: object) => {
        console.log(err);
      });

    // 区域2-巡检内容列表
    (this as any).$services
      .getXsnrData({
        method: "get",
        data: {
          jhId: this.paramsData.queryId || "",
          xsfs: this.paramsData.xsfs || "",
        },
      })
      .then((result: any) => {
        if (result.data) {
          this.tableData = result.data.xsnrData;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  //进度条的值 0-100之间
  get percentage() {
    let num = 10;
    let ZCDS = this.cddata.ZCDS;
    let YXSCDS = this.cddata.YXSCDS;
    if (ZCDS > 0) {
      // num = Math.round((YXSCDS / ZCDS) * 100);
      num = Number(((YXSCDS / ZCDS) * 100).toFixed(2));
    } else {
      num = 0;
    }
    if (num <= 100) {
      let endTime: any = new Date();
      this.continue = endTime - this.querydata.XSKSSJ;
    }
    return num;
  }

  // 默认有个视频展示着
  getJqrCode() {
    (this as any).$services
      .getJqrCode({
        method: "get",
        data: {
          jhId: this.paramsData.queryId || "",
        },
      })
      .then((result: any) => {
        console.log(result);
        let data = result.data || [];
        let first = data[0] || {};
        let videoData = {
          stationId: first.BDZID,
          list: data.map((v) => {
            return {
              stationId: v.BDZID,
              indexCode: v.VIDEOCODE,
            };
          }),
        };
        this.setShipin(videoData);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  timer = null;
  mounted() {
    this.getJqrCode();
    this.init();
    this.setTimer();
  }

  beforeDestroy() {
    this.clearTimer();
  }
  setTimer() {
    this.clearTimer();
    this.timer = window.setInterval(this.init, 5000);
  }
  clearTimer() {
    if (this.timer) {
      window.clearInterval(this.timer);
      this.timer = null;
    }
  }
}
</script>

<style lang="scss" scoped>
.inspection-monitor-box {
  width: 100%;
  height: 100%;
  padding: 0 0.24rem 0.24rem;
  .inspection-monitor-header-box {
    height: 0.2rem;
    // margin: 0.1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .subtitle-box {
      height: 0.3rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .name {
        font-size: 0.18rem;
        margin-left: 0.06rem;
      }
    }
    .return-btn {
      height: 0.3rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .return {
        width: 0.9rem;
        height: 0.3rem;
        text-align: right;
        > span {
          display: inline-block;
          width: 0.9rem;
          height: 0.3rem;
          background: url(../../../../assets/img/return.png) no-repeat;
          background-size: 100% 100%;
          vertical-align: middle;
          cursor: pointer;
        }
      }
    }
  }
  .cont-box {
    width: 100%;
    height: calc(100% - 0.2rem);
    display: flex;
    .cont-box-left {
      width: 9.48rem;
      // background-color: #666;
      margin: 0 0.2rem;
      position: relative;
      .cont-box-left-title {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 0.5rem;
        padding-left: 0.5rem;
        > div:nth-child(1) {
          line-height: 0.36rem;
          font-size: 0.22rem;
          color: #bcaa15;
        }
        > div:nth-child(2) {
          font-size: 0.18rem;
          width: 3.8rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .video2 {
        width: 100%;
        height: 88%;
        background: url(../../../../assets/img/JointInspection/video2.png)
          no-repeat;
        background-size: 100% 100%;
        margin-top: 0.3rem;
        padding: 0.4rem 0.15rem 0.15rem;
        .video2-box {
          width: 100%;
          height: 100%;
        }
      }
      .bottom-btn {
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin-top: 1%;
      }
    }
    .cont-box-right {
      width: calc(100% - 9.88rem);
      position: relative;
      .alarm {
        width: 0.88rem;
        height: 0.48rem;
        position: absolute;
        right: -0.1rem;
        top: 0;
        background: url(../../../../assets/img/JointInspection/btn.png)
          no-repeat;
        background-size: 100% 100%;
        font-size: 0.18rem;
        line-height: 0.3rem;
        text-align: center;
        cursor: pointer;
        z-index: 99;
      }
      .cont-box-right-title {
        position: absolute;
        left: 0;
        top: 0;
        height: 0.6rem;
        width: 100%;
        .Progress-box {
          height: 0.4rem;
          line-height: 0.4rem;
          padding-left: 0.92rem;
          display: flex;
          .Progress-text {
            width: 1.6rem;
            padding-right: 0.1rem;
            font-size: 0.22rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .Progress {
            width: 4.72rem;
            height: 0.26rem;
            margin: auto 0;
          }
        }
        .Message-box {
          height: 0.2rem;
          width: 88%;
          padding-left: 2.94rem;
          display: flex;
          justify-content: space-between;
          > div {
            > span {
              font-size: 18px;
            }
            > span:nth-child(2) {
              margin-left: 0.1rem;
              color: #cfcd0a;
            }
            .colorY {
              color: #cfcd0a;
            }
            .colorR {
              color: #ff0410 !important;
            }
          }
        }
      }
      .right-table {
        width: 100%;
        height: 90%;
        margin-top: 0.55rem;
        padding: 0.75rem 0.35rem 0.35rem;
        background: url(../../../../assets/img/JointInspection/table.png)
          no-repeat;
        background-size: 100% 100%;
        .table-box {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .iframe {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    opacity: 0.1;
    background: none;
    pointer-events: none;
  }
}
</style>
<style lang="scss">
.inspection-monitor-box {
  .cont-box-right-title {
    .el-progress-bar__innerText {
      color: #fff;
    }
    .el-progress-bar__outer {
      background-color: transparent;
      border: 1px solid #999999;
    }
    .el-progress-bar__inner {
      height: 0.2rem;
      top: 0.02rem;
      left: 0.02rem;
    }
  }
}
</style>
